import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet,
} from 'react-native';

import {
    Press
} from './../../../components';

import {
    Actions
} from 'react-native-router-flux';

import * as Const from "../../../const";
import Connect from './.././../../utils/connect';

import fav_icon from './../../../images/home/discover/fav_icon.png';

@Connect([`chat`,`user`])
class LikeAir extends PureComponent<any>{
    get chatState() {
        const {
            chat
        } = this.props;
        return chat;
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser = {}
        } = user;
        return loginUser;
    }

    get userId() {
        const {
            userId
        } = this.loginUser;
        return userId;
    }

    get unRead() {
        const {
            unReadConnection
        } = this.chatState;
        return unReadConnection || {}
    }

    get useKeys() {
        return Object.keys(
            this.unRead
        ).filter((key:string) => (
            key.includes(`${this.userId}`)
        ))
    }

    get dotTotal() {
        const values = this.useKeys.map(
            (key:string) => this.unRead[key]
        )
        if(values.length <= 0)  return 0;
        return values.reduce((a:any,b:any) => (
            a.length + b.length
        )) as number;
    }

    private toConnection = () => {
        Actions.push(`/connection`)
    }

    render() {
        return (
            <Press
                style={styles.container}
                onPress={this.toConnection}
            >
                <Image source={fav_icon}/>
                <Text style={styles.text}>
                    Likes
                </Text>
                {this.dotTotal > 0 && (
                    <View style={styles.dotStyle} />
                )}
            </Press>
        )
    }
}

export default LikeAir;

const styles = StyleSheet.create({
    container:{
        height:36,
        width:90,
        right:0,
        bottom:12,
        position:`absolute`,
        borderTopLeftRadius:18,
        borderBottomLeftRadius:18,
        backgroundColor:`#AA00FF`,
        flexDirection:`row`,
        alignItems:`center`,
        justifyContent:`center`
    },
    text:{
        fontSize:14,
        color:`#fff`,
        marginLeft:4,
        fontFamily:Const.fontFamily
    },
    dotStyle:{
        width:8,
        height:8,
        left:2,
        top:2,
        borderRadius:4,
        position:`absolute`,
        backgroundColor:Const.color
    }
}) as any

